<template>
	<view class="">
		<view class="topimg">
			<image src="../static/bg_rili.jpg" mode="widthFix" style="width:100%;"></image>
			<view class="dayweek" >
                <text class="showday">{{current_day}}</text><text class="showday">星期{{week[current_weekdays].date}}</text>
			</view>
			<view class="yearmonth">
				<view class="permonth" @click="searchrili(1)">
					<image src="../static/arrow.png" mode=""></image>
				</view>
				<view class="ym">
					{{look_year}}年{{look_month}}月
				</view>
				<view class="nextmonth" @click="searchrili(2)">
					<image src="../static/arrow.png" mode=""></image>
				</view> 
			</view>
		</view>
		<view class="rqbox">
			<view class="allrq">
				<view v-for="(item,index) of week" :key="item.date" class="week">
					<view class="entag">
						{{item.tag}} 
					</view>
					<view class="cntag">
						{{item.date}}
					</view>
				</view>
				<view class="daysempty" v-for="item of daysempty" :key="item*100"></view>
				<view 
					class="currentdaybox" 
					:class="[item.type==2 || (!iscurrentmonth && index==0)?'currentday ':'',item.status_flower?'yq':'dq']" 
					v-for="(item,index) of days"
					:key="item.num"
				>
						<view class="currentmouthofdays ">
							{{item.type==2?'今': item.num}}
						</view>
						<view class="flowernum">
							{{item.number_flower==0?'':'('+item.number_flower+')'}}
						</view>
				</view>
			</view>
		</view>
        <view class="flowercolortype">
        	<view class="flowerctitem">
        		<view class="flowerpointcolor">
        			
        		</view>
				<view class="flowerpointtitle">
					待收花
				</view>
        	</view>
			<view class="flowerctitem">
				<view class="flowerpointcolor">
					
				</view>
				<view class="flowerpointtitle">
					已收花
				</view>
			</view>
        </view>	
		<!-- //
		//  
				1 过去了 没有签到的样式 
				2 今天为签到的样式
				3 签到的样式 
		-->
	</view>
</template>

<script>
	import {
		ordercalendar
	} from "@/api/user.js"
	export default {
		data() {
			return {
				week: [{
						tag: 'SUN',
						date: '日'
					},
					{
						tag: 'MON',
						date: '一'
					},
					{
						tag: 'TUE',
						date: '二'
					},
					{
						tag: 'WED',
						date: '三'
					},
					{
						tag: 'THU',
						date: '四'
					},
					{
						tag: 'FRI',
						date: '五'
					},
					{
						tag: 'SAT',
						date: '六'
					}

				],
				current_year: new Date().getFullYear(),
				current_month: new Date().getMonth() + 1,
				current_day:  new Date().getDate(),
				current_weekdays: new Date().getDay(),
				days: [],
				daysempty: 0,
				iscurrentmonth:true,
				look_year:new Date().getFullYear(),
				look_month:new Date().getMonth() + 1
			}
		},
		onLoad() {
			
		},
		mounted() {
			this.getsignlist()
		},
		methods: {
            searchrili(type){
				switch (type) {
					case 1:
					var month = this.look_month 
					if(month === 1 ){
						this.look_year = this.look_year-1
						this.look_month = 12
					}else if(month > 1 ){
						this.look_month = this.look_month - 1
					}
					this.getsignlist()
					break;
					case 2:
					// console.log(2)
					var month = this.look_month 
					if(month ===12 ){
						this.look_year = this.look_year+1
						this.look_month = 1
					}else if(month < 12 ){
						this.look_month = this.look_month + 1
						
					}
					this.getsignlist()
					break;
				}
			},
			// 获取签到记录
			async getsignlist() {
				var current_date = new Date();
				this.current_year = current_date.getFullYear()
				this.current_month = current_date.getMonth() + 1
				// this.current_day = current_date.getDate(); //获取当前日(1-31)
				// this.current_weekdays = current_date.getDay()
				
				
				var data = {
					year:this.look_year,
					month:this.look_month
				}
				uni.showLoading({
					title:"请求中..."
				})
				var res = await ordercalendar(data)
				// res.data = [] 
				// 判断是否是当天
				var iscurrentmonth = this.current_year === this.look_year && this.current_month=== this.look_month
				this.iscurrentmonth =iscurrentmonth
				if(this.look_year != this.current_year ||  this.current_month != this.look_month){
					// console.log(this.look_year, this.look_month,1,8888) // 2022 / 1 / 1
					var date = new Date(this.look_year+'/'+this.look_month +'/'+'1');
					// console.log(date.getMonth(),"月份")
				}else{ 
					var date = current_date 
				}
				this.current_weekdays= date.getDay (),
				this.current_day =  date.getDate() <10 ? '0'+date.getDate ():date.getDate (); //获取当前日(1-31)
				var a = date.getFullYear(); //获取当前年份(2位)
				var b = date.getMonth() + 1; // 获取当前月份(0-11,0代表1月)
				var c = date.getDate(); //获取当前日(1-31)
				// var d = date.getDay (); //获取当前星期X(0-6,0代表星期天)
				var b2 = date.getMonth() + 1;
				if (b < 10) {
					b = '0' + b
				}
				var yearmonthday = a + ',' + b
				var yearmonthday2 = a + '/' + b2
				console.log(yearmonthday2,'yearmonthday2')
				var daysempty = this.getcurrentdays(a , b2)
				var daylength = this.getDaysInMonth(a, b2)
				var arr = []
				var yqdarr = res.data
				// var yqdarr = []
				for (var i = 1; i < daylength + 1; i++) {
					var obj = {}
					// 先判断是否小于或者大于 或者等于 今天
					if (i < 10) {
						var riqi = a + '-' + b + '-' + '0' + i
					} else {
						var riqi = a + '-' + b + '-' + i
					}
					// 找到或找不到有两种情况   wqd drwqd 
					for (var j = 0; j < yqdarr.length; j++) {
						if (riqi == yqdarr[j].date) {
							obj.isown = true
							if(yqdarr[j].status>1){
								obj.status_flower=true
							}else{
								obj.status_flower=false
							}
							obj.number_flower= yqdarr[j].number
						}
						
					}
					if(obj.isown == undefined){
						obj.number_flower =''
						obj.status_flower=false
					}
					if (i == c ) {
						obj.type = iscurrentmonth ? 2: 3
					}
					if (i < c) {
						obj.type = 1
					}
					if (i > c) {
						obj.type = 3
					}
					// 判断找到当前日期 判断当前日期是否有类型 
					obj.num = i
					arr.push(obj)
				}	
				this.days = arr
				
				let firstDay = new Date(this.look_year, this.look_month - 1, 1).getDay()
				let fullDate = this.look_year + '-' + this.look_month + '-' + this.current_day
				// console.log(firstDay, fullDate)
				// console.log(this._getLastMonthDays(firstDay, this.getDate(fullDate)))
				
				this.daysempty = this._getLastMonthDays(firstDay, this.getDate(fullDate))
				uni.hideLoading({
					success: (res) => {}
				})
			},

			getcurrentdays(a,b) {
				var nowdate = new Date(a,b);
				var weekday = nowdate.getDay()
				return weekday
			},
			// js获取某年某月一共多少天
			getDaysInMonth(year, month) {
				let date = new Date(year,('0'+month));
				return new Date(date.getTime() - 864e5).getDate();
			},
			// console.log(getDaysInMonth(2018,02))
			
			/**
			 * 获取任意时间
			 */
			getDate(date, AddDayCount = 0, str = 'day') {
				if (!date) {
					date = new Date()
				}
				if (typeof date !== 'object') {
					date = date.replace(/-/g, '/')
				}
				const dd = new Date(date)
				switch (str) {
					case 'day':
						dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
						break
					case 'month':
						if (dd.getDate() === 31) {
							dd.setDate(dd.getDate() + AddDayCount)
						} else {
							dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
						}
						break
					case 'year':
						dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
						break
				}
				const y = dd.getFullYear()
				const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
				const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
				return {
					fullDate: y + '-' + m + '-' + d,
					year: y,
					month: m,
					date: d,
					day: dd.getDay()
				}
			},
			/**
			 * 获取上月剩余天数
			 */
			_getLastMonthDays(firstDay, full) {
				let dateArr = []
				for (let i = firstDay; i > 0; i--) {
					const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
					dateArr.push({
						date: beforeDate,
						month: full.month - 1,
						// lunar: this.getlunar(full.year, full.month - 1, beforeDate),
						disable: true
					})
				}
				return dateArr
			},
			
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	
.topimg{
	position:relative;
	.dayweek{
		position:absolute;
		// background-color:red;
		bottom:170rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		box-sizing: border-box;
		padding-left:110rpx;
		text:first-child{
			font-size:50rpx;
			margin-right:20rpx;
		}
	}
	.yearmonth{
		position:absolute;
		bottom:90rpx;
		// background-color:green;
		box-sizing: border-box;
		padding-left:50rpx;
		display:flex;
		align-items: center;
		.ym{
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		.permonth{
			width:60rpx;
			height:60rpx;
			display:flex;
			align-items: center;
			justify-content: center;
			image{
				width:40rpx;
				height:40rpx;
			}
		}
		.nextmonth{
			width:60rpx;
			height:60rpx;
			display:flex;
			align-items: center;
			justify-content: center;
			
			image{
				width:40rpx;
				height:40rpx;
				transform: rotateY(180deg);
			}
		}
	}
}
	.nav_tab {
		position: fixed;
		top: 0;
		z-index: 9
	}

	.rqbox {
		/* width: 690rpx; */
		width: 100vw;
		min-height: 600rpx;
		margin: auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding-bottom: 50rpx;
		/* margin-top: -86rpx; */
		background-color: #fff;
	}

	/* .rqtitle {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		text-align: center;
		height: 86rpx;
		width: 100%;
		line-height: 86rpx;
		border-bottom: 2rpx solid #ccc;
	} */

	.allrq {
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
		align-items: center;
		width: 749rpx;
		margin: auto;
		box-sizing: border-box;
		margin-top:20rpx;
	}

	.allrq>view:nth-child(7n+1) {
		margin-left: 0;
	}

	.allrq>view {
		width: 107rpx;
		box-sizing: border-box;
		/* border: 1rpx solid red; */
		text-align: center;
		color: #111111;
	}

	.allrq>.currentdaybox {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 14rpx;
		height:92rpx;
	}
	.allrq>.currentdaybox .currentmouthofdays {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		font-weight: bold;
	}
	.allrq>.currentdaybox .currentmouthofdays .flowernum {
		font-size: 24rpx;
		font-weight: bold;
		width: 100rpx;
		height: 40rpx;
		lihe-heigh: 40rpx;
	} 

	.allrq>.currentdaybox .flowernum {
		color: #F2646A;
		margin-top:0rpx;
		font-size: 24rpx;
		font-weight: bold;
	}

	.allxq .week {
		margin-top: 30rpx;
	}

	.allrq .week .entag {
		font-size: 16rpx;
		font-family: Adobe Heiti Std;
		font-weight: bold;
		color: #000000;
	}

	.allrq .week .cntag {
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		font-weight: bold;
		color: #000000;
	}
	.currentday {
		/* border: 2rpx solid #59E3B2; */
		border-radius: 50%;
	}
	.currentday>.currentmouthofdays {
		background: #9ACD44;
		border-radius: 50%;
		color:#fff;
		font-weight: bold;
	}
	.yq .flowernum{
		color:#BDBCBC !important;
	}
	.dq .flowernum{
		color:#F2646A !important;
	}
	
	.flowercolortype{
		display:flex;
		align-items: center;
		justify-content: center;
		padding-top:35rpx;
		border-top:1px solid #C7C6C6;
		.flowerctitem{
			display:flex;
			align-items: center;
			justify-content: center;
			.flowerpointcolor{
				width: 18rpx;
				height: 18rpx;
				background: #F2646A;
				border-radius: 50%;
				
			}
			.flowerpointtitle{
				font-size: 26rpx;
				font-weight: normal;
				color: #333333;
				margin-left:10rpx;
			}
		}
		.flowerctitem:last-child{
			margin-left:170rpx;
			.flowerpointcolor{
				background: #BDBCBC;
			}
		}
	}
	
</style>
